<template>
  <section ref="wrapper">
    <div>

      <div class="present-area">
        <div class="present-title">当前</div>
        <div class="present-btn">{{this.city}}</div>
      </div>
      <div class="hot-area">
        <div class="hot-title">热门地点</div>
        <div class="hot-btn"   v-for="item of hotCity" :key="item.id">{{item.area}}</div>
      </div>
      <div class="all-area">
        <div  v-for="(item,key) of allCity"
              :key="key">
          <div class="all-title">{{key}}</div>
          <div class="all-btn" v-for="innerItem of item" :key="innerItem.id">
            {{innerItem.area}}
          </div>

        </div>

      </div>
    </div>
  </section>


</template>

<script>
    import BScroll from 'better-scroll'
    import BMap from 'BMap'
    export default {
        name: "locatuinList",
      data(){
          return{
            city:' ',
            allCity:{
              "A":[
                {
                  id:'001',
                  area:'北京'
                },
                {
                  id:'003',
                  area:'上海'
                },
                {
                  id:'002',
                  area:'厦门'
                },
                {
                  id:'004',
                  area:'广州'
                },
                {
                  id:'0505',
                  area:'重庆'
                },
                {
                  id:'05201',
                  area:'海南'
                }, {
                  id:'002',
                  area:'厦门'
                },
                {
                  id:'004',
                  area:'广州'
                },
                {
                  id:'0505',
                  area:'重庆'
                },
                {
                  id:'05201',
                  area:'海南'
                }
              ],
              "B":[
                {
                  id:'00e5',
                  area:'北京'
                },
                {
                  id:'w006',
                  area:'上海'
                }
              ]

            },
            hotCity:[
              {
                id:'001',
                area:'北京'
              },
              {
                id:'003',
                area:'上海'
              },
              {
                id:'002',
                area:'厦门'
              },
              {
                id:'004',
                area:'广州'
              },
              {
                id:'0505',
                area:'重庆'
              },
              {
                id:'05201',
                area:'海南'
              },
              {
                id:'005',
                area:'重庆'
              },
              {
                id:'001',
                area:'海南'
              }


            ]
          }
      },
      mounted(){
        let scroll = new BScroll(this.$refs.wrapper,{
          click:true,
          mouseWheel:{
            speed:20,
            invert:false,
            easeTime:300
          }
        });

        let map = new BMap.Map('allmap');
        let myCity = new BMap.LocalCity();
        myCity.get((res)=>{
          if(res){
            this.city = res.name
          }else {
            this.city = "正在获取"
          }
        })
      }
    }
</script>

<style lang="stylus" scoped>
  section
     background :#f4f4f4
     position :absolute
     top:1.12rem
     left:0
     bottom:0
     width :100%
     overflow :hidden
    .present-area,.hot-area,.all-area
        padding :0.2rem
    .hot-area
        overflow :hidden
    .present-title,.hot-title,.all-title
        margin :0.2rem
    .present-btn,.hot-btn,.all-btn
       background :#fff
       padding :0.25rem
       box-sizing :border-box
   .present-btn,.all-btn
       width :84%
   .hot-btn
       width :18%
       margin :0.1rem 0.2rem
       float :left
  .all-btn
      margin-bottom :0.08rem
</style>
